<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> #canvas { width: 500px; height: 500px }</style>
</head>
<body>
    <div id = "canvas">

    </div>
    <script src="../three.js"></script>
    <script>
        /* 我认为适用于2d */
        const width = document.getElementById("canvas").clientWidth
        const height = document.getElementById("canvas").clientHeight
        //构建一个场景
        var scene = new THREE.Scene();
        //构建一个相机
        var camera = new THREE.OrthographicCamera(-250,250,-250,250, 0.1, 1000);
        //构建一个渲染器
        var renderer = new THREE.WebGLRenderer();
        //渲染器画布大小
        renderer.setSize(width, height);
        //渲染器画布画在哪个dom上
        document.getElementById("canvas").appendChild(renderer.domElement);
        //创建一个立方体
        var geometry = new THREE.CubeGeometry(300,300,300);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); 
        scene.add(cube);
        //相机在哪个位置拍摄
        camera.position.z = 500;
        //循环渲染函数 
        function render() {
            requestAnimationFrame(render);
            cube.rotation.z += 0.01;
            //cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
    
</body>
</html>